<div id="chart-container">
  <canvas id="my-chart" width="400" height="400"></canvas>
</div>


var data = [
    {
        value: 55,
        color:"#d39d19",
        highlight: "#FF5A5E",
        label: "Understand"
    },
    {
        value: 65,
        color: "#d39d19",
        highlight: "#5AD3D1",
        label: "Generate"
    },
    {
        value: 55,
        color: "#d39d19",
        highlight: "#FFC870",
        label: "Produce"
    },
    {
        value: 65,
        color: "#349bba",
        highlight: "#A8B3C5",
        label: "Evaluate"
    },
    {
        value: 80,
        color: "#349bba",
        highlight: "#616774",
        label: "Facilitate"
    },
  {
        value: 90,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Manage"
    },
    {
        value: 85,
        color: "#df5855",
        highlight: "#5AD3D1",
        label: "Play"
    },
    {
        value: 80,
        color: "#df5855",
        highlight: "#FFC870",
        label: "Collaborate"
    },
    {
        value: 50,
        color: "#d39d19",
        highlight: "#A8B3C5",
        label: "Communicate"
    },
    {
        value: 65,
        color: "#d39d19",
        highlight: "#616774",
        label: "Develop"
    }

],
    options = {
       showScale: false,
      
      // Boolean - If we want to override with a hard coded scale
    scaleOverride: true,

    // ** Required if scaleOverride is true **
    // Number - The number of steps in a hard coded scale
    scaleSteps: 20,
    // Number - The value jump in the hard coded scale
    scaleStepWidth: 5,
    // Number - The scale starting value
    scaleStartValue: 0,
      
        // String - Colour of the scale line
    scaleLineColor: "rgba(0,0,0,0.1)",
      
    //Boolean - Show a backdrop to the scale label
    scaleShowLabelBackdrop : false,

    //String - The colour of the label backdrop
    scaleBackdropColor : "rgba(255,255,255,0.75)",

    // Boolean - Whether the scale should begin at zero
    scaleBeginAtZero : true,

    //Number - The backdrop padding above & below the label in pixels
    scaleBackdropPaddingY : 2,

    //Number - The backdrop padding to the side of the label in pixels
    scaleBackdropPaddingX : 2,

    //Boolean - Show line for each value in the scale
    scaleShowLine : true,

    //Boolean - Stroke a line around each segment in the chart
    segmentShowStroke : true,

    //String - The colour of the stroke on each segement.
    segmentStrokeColor : "#fff",

    //Number - The width of the stroke value in pixels
    segmentStrokeWidth : 2,

    //Number - Amount of animation steps
    animationSteps : 100,

    //String - Animation easing effect.
    animationEasing : "easeOutBounce",

    //Boolean - Whether to animate the rotation of the chart
    animateRotate : true,

    //Boolean - Whether to animate scaling the chart from the centre
    animateScale : false,

    //String - A legend template
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

},
ctx = $("#my-chart").get(0).getContext("2d"),
ourChart = new Chart(ctx).PolarArea(data, options);